<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>视频提取</title>
</head>

<body>
<h5> 请按F12后，看控制台输出。 </h5>

<div>
    <input type="file" id="uploadFile">
    <button onclick="uploadFile()">上传</button>
</div>

<div>

    &emsp;文件标识: <input type="text" id="fileId" placeholder="first upload file">
    <br/>

    &emsp;目标格式:
    <select id="videoCodecId">
        <optgroup label="video codec id">
            <option value="h264" selected>H264</option>
            <option value="hevc">H265</option>
        </optgroup>
    </select>
    <br/>

    关键帧间隔:
    <input type="number" id="videoKeyInt" placeholder="25">
    <br/>

    &emsp;&emsp;分辨率:
    <input type="text" id="videoSize" placeholder="640x480">
    <br/>

    &emsp;&emsp;比特率:
    <input type="text" id="bitRate" placeholder="5M">
    <br/>

    &emsp;&emsp;禁用SEI:
    <select id="noSEI">
        <optgroup label="remove sei">
            <option value="true" selected>true</option>
            <option value="false">false</option>
        </optgroup>
    </select>
    <br/>

    <button onclick="videoConvert()">视频提取</button>
    <br/>
</div>

<div id="console"></div>
</body>
</html>

<script>
    if (typeof (EventSource) !== "undefined") {
        window.onload = function () {
            const fileId = localStorage.getItem("fileId")
            document.getElementById('fileId').value = fileId
        }
    } else {
        document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 server-sent 事件...";
    }
</script>

<script>
    function videoConvert() {
        let videoCodecId = document.getElementById("videoCodecId").value
        let fileId = document.getElementById('fileId').value
        let videoKeyInt = document.getElementById('videoKeyInt').value
        let videoSize = document.getElementById('videoSize').value
        let bitRate = document.getElementById('bitRate').value
        let noSEI = document.getElementById('noSEI').value

        let source = new EventSource(`/video?codecId=${videoCodecId}&fileId=${fileId}&keyInt=${videoKeyInt}&size=${videoSize}&bitRate=${bitRate}&noSEI=${noSEI}`);
        source.onmessage = function (e) {
            document.getElementById("console").innerHTML += e.data + "<br/>";
            console.log(e.data)
        };
        source.addEventListener("close", (e) => {
            document.getElementById("console").innerHTML += e.data + "<br/>";
            console.log(e.data);
            source.close()
        });

    }

    function uploadFile() {
        const fileInput = document.getElementById("uploadFile")

        const formData = new FormData();
        formData.append('file', fileInput.files[0]);

        fetch("/upload", {
            method: "POST",
            body: formData,
        }).then(response => {
            return response.json()
        }).then(data => {
            console.log(data)
            if (data.code === 0) {
                document.getElementById('fileId').value = data.fileId
                localStorage.setItem("fileId", data.fileId)
            }
        }).catch(error => {
            console.error(error)
        });
    }

</script>